<template>
    <yk-table >
      <yk-table-column property="name" label="标签名称"></yk-table-column>
      <yk-table-column property="time" label="创建时间"></yk-table-column>
      <yk-table-column
        property="manage"
        label="操作"
        align="right"
      ></yk-table-column>
      <template #tbody>
        <tr v-for="(item, index) in label" :key="index" class="yk-table__row">
          <td class="yk-table__cell">
            {{ item.label_name  }}
          </td>
          <td class="yk-table__cell">
            {{ getTimeYMDHMS(item.created_at) }}
          </td>
          <td class="yk-table__cell text-right">
            <yk-text type="primary" style="cursor: pointer" @click="deletelabel(item.id)">删除</yk-text>
          </td>
        </tr>
      </template>
    </yk-table>
  </template>
  <script setup lang="ts">
  import { ref, getCurrentInstance, watch } from 'vue';
  import type { labelData } from '../../utils/interface';
  import { deleteLabelApi } from '../../api/label_api';
  import { useUserStore } from "../../stores/user";
  import { useCode } from "../../hooks/codeHook";
  import { getTimeYMDHMS } from '../../utils/time';
  const { tackleCode } = useCode();
  const userStore = useUserStore();
  const emit = defineEmits(['deleteLabel']);
type labelProps = {
  label: labelData[];
}
const props = withDefaults(defineProps<labelProps>(),{
  label: () => [],
});
const label = ref<Array<labelData>>([]);

  const proxy: any = getCurrentInstance()?.proxy; //获取消息框实例

  // 删除分组
  const deletelabel = (id: number) => {
    let request = {
      token: userStore.token,
      id: id,
    }
    deleteLabelApi(request).then((res: any) => {
      if (tackleCode(res.data.code)) {
        label.value = label.value.filter((item: { id: number }) => item.id !== id);
        emit('deleteLabel');
        proxy.$message({ type: 'primary', message: '删除成功' })
      }
    })
  };

  // 监听数据变化,当新建标签时,更新数据
  watch(
    () => props.label,
    (newValue) => {
      label.value = [...newValue];
    }
  );

  </script>
